import React, { useState, useEffect } from 'react'
import { Input, Text, View } from '@tarojs/components'
import { Space } from '@/components/UiComponents'
const index = (props) => {
    const { data = {}, index, ChangeValue } = props
    const {
        title,
        label,
        require = false,
        desc,
        value = '',
    } = data
    const [list, setList] = useState([])
    useEffect(() => {
        if (value && typeof value === 'string') {
            setList(value.split('______').filter(val => {
                return val
            }).map(item => {
                return {
                    label: item,
                    value: ''
                }
            }))
        } else if (typeof value === 'object') {
            setList(value)
        }
    }, [])
    return <View className='CollectWps_box_content'>
        <View className='CollectWps_label'>{require && <Text style={{ color: "red", right: 4 }}>*</Text>}{label}</View>
        <View className='CollectWps_desc'>{desc}</View>
        <View className=''>
            <Space wrap={true}>
                {list.map((item, s) => {
                    const { label, value } = item
                    return <Space>
                        {label}
                        <Input className='CollectWps_newInput' value={value} onInput={(e) => {
                            const arr = list.map((val, o) => {
                                if (o === s) {
                                    return {
                                        ...val,
                                        value: e.detail.value
                                    }
                                } else {
                                    return val
                                }
                            })
                            setList(arr)
                            ChangeValue({
                                index,
                                value: {
                                    value: arr.map(item => {
                                        const { label, value } = item
                                        return label + value
                                    })
                                }
                            })
                        }}> </Input>
                    </Space>
                })}
            </Space>

        </View>

    </View>
}
export default index